<template>
  <view id="productID">
    <view class="dataContentClass">
      <view class="shengchan">
        <view class="icon">
          <img src="../static/images/icon1.png" alt="" /><view class="text">实时生产</view>
        </view>
        <view class="data">
          <view
            >{{ shengchan }}<span>万{{ a }}</span></view
          >
          <view>实时生产</view>
        </view>
      </view>
      <view class="hexiao">
        <view class="icon">
          <img src="../static/images/icon2.png" alt="" /><view class="text">实时核销</view>
        </view>
        <view class="data">
          <view
            >{{ hexiao }}<span>万{{ a }}</span></view
          >
          <view>实时核销</view>
        </view>
      </view>
      <view class="shebei">
        <view class="icon">
          <img src="../static/images/icon3.png" alt="" /><view class="text">读写设备</view>
        </view>
        <view class="data">
          <view style="color: yellow"><view>100台</view><view>在线</view></view>
          <view style="color: red"><view>100台</view><view>离线</view></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useWebsocketStore } from '@/stores/modules/websocket'
import { useyanZhengStore } from '@/stores/modules/yanZheng'
const yanZhengStore = useyanZhengStore()
const a = ref('')
const shengchan = ref(43267)
const hexiao = ref(39856)
watch(
  () => useWebsocketStore().date,
  () => {
    shengchan.value++
    hexiao.value++
  },
)
function ifindex() {
  if (yanZhengStore.index == 'shui') {
    a.value = '捅'
  } else if (yanZhengStore.index == 'maotai') {
    a.value = '瓶'
  } else if (yanZhengStore.index == 'cha') {
    a.value = '饼'
  } else if (yanZhengStore.index == 'bao') {
    a.value = '个'
  } else if (yanZhengStore.index == 'yifu') {
    a.value = '件'
  } else if (yanZhengStore.index == 'xie') {
    a.value = '双'
  } else if (yanZhengStore.index == 'lang') {
    a.value = '瓶'
  } else if (yanZhengStore.index == 'niunai') {
    a.value = '瓶'
  } else if (yanZhengStore.index == 'jiancai') {
    a.value = '个'
  } else if (yanZhengStore.index == 'yao') {
    a.value = '盒'
  }
}
ifindex()
watch(
  () => yanZhengStore.index,
  () => {
    ifindex()
  },
)

setInterval(() => {
  shengchan.value++
}, 2000)

setInterval(() => {
  hexiao.value++
}, 5000)
</script>

<style lang="scss" scoped>
#productID {
  position: relative;
  font-size: 18px;
  .dataContentClass {
    position: absolute;
    width: 21.5vw;
    height: 43vh;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    .shengchan,
    .hexiao,
    .shebei {
      padding-left: 1vw;
      display: flex;
      .icon {
        width: 6.3vw;
        display: flex;
        flex-direction: column;
        img {
          height: 10vh;
        }
        .text {
          height: 4vh;
          font-size: 2vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
      .data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #0ff;
        font-size: 2.5vh;
        view {
          &:nth-child(1) {
            span {
              font-size: 1.5vh;
            }
          }
        }
      }
    }
    .shengchan {
      height: 14vh;
      color: #0ff;
      .data {
        margin-top: 2vh;
        height: 8vh;
        width: 15vw;
        background: url('../static/images/adorn2.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .hexiao {
      height: 15vh;
      color: yellow;
      .data {
        margin-top: 2vh;
        height: 9vh;
        width: 15vw;
        background: url('../static/images/adorn1.png') no-repeat;
        background-size: 100% 100%;
        view {
          &:nth-child(2) {
            color: yellow;
          }
        }
      }
    }
    .shebei {
      height: 14vh;
      color: #0ff;
      border-top: 1px solid #000;
      border-image: url('../static/images/adorn3.png') 30 fill;
      .data {
        width: 15vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        view {
          width: 7.5vw;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          view {
            &:nth-child(2) {
              font-size: 2vh;
            }
          }
        }
      }
    }
  }
}
</style>
